<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>9.姓名完整版</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
      <div id="app">
        姓：<input type="text" v-model="firstname" /><br /><br /><br />
        名：<input type="text" v-model="lastname" /><br /><br /><br />
        <h1>全名：{{fullname}}</h1>
        <hr>
      </div>
      <div id="app1">
         姓：<input type="text" v-model="firstname1" /><br /><br /><br />
        名：<input type="text" v-model="lastname1" /><br /><br /><br />
        <h1>全名：{{fullname1}}</h1>
        <hr>
      </div>
      <div id="app2">
        姓：<input type="text" v-model="firstname2" /><br /><br /><br />
       名：<input type="text" v-model="lastname2" /><br /><br /><br />
       <h1>全名：{{fullname2}}</h1>
       <hr>
     </div>
  </body>

  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;

    new Vue({
      el: "#app",
      data: {
        firstname: "liu",
        lastname: "meng",
        fullname: "liu-meng",
      },

      watch: {
        firstname(newvalue) {
          setTimeout(() => {
            let arr = this.fullname.split("-");
            arr[0] = newvalue[0].toUpperCase() + newvalue.slice(1);
            this.fullname = arr[0] + "-" + arr[1];
          }, 2000);
        },
        lastname(newvalue) {
          setTimeout(() => {
            let arr = this.fullname.split("-");
            arr[1] = newvalue[0].toUpperCase() + newvalue.slice(1);
            this.fullname = arr[0] + "-" + arr[1];
          }, 2000);
        },
      },
    });


    new Vue({
      el: "#app1",
      data: {
        firstname1: "liu",
        lastname1: "meng",
        fullname1: "liu-meng",
      },

      watch: {
        firstname1(newvalue) {
          setTimeout(() => {
            let arr = this.fullname1.split("-");
            arr[0] = newvalue[0].toUpperCase() + newvalue.slice(1);
            this.fullname1 = arr[0] + "-" + arr[1];
          }, 2000);
        },
        lastname1(newvalue) {
          setTimeout(() => {
            let arr = this.fullname1.split("-");
            arr[1] = newvalue[0].toUpperCase() + newvalue.slice(1);
            this.fullname1 = arr[0] + "-" + arr[1];
          }, 2000);
        },
      },
    });

    new Vue({
      el: "#app2",
      data: {
        firstname2: "liu",
        lastname2: "meng",
        fullname2: "liu-meng",
      },

      watch: {
        firstname2(newvalue) {
          setTimeout(() => {
            let arr = this.fullname2.split("-");
            arr[0] = newvalue[0].toUpperCase() + newvalue.slice(1);
            this.fullname2 = arr[0] + "-" + arr[1];
          }, 2000);
        },
        lastname2(newvalue) {
          setTimeout(() => {
            let arr = this.fullname2.split("-");
            arr[1] = newvalue[0].toUpperCase() + newvalue.slice(1);
            this.fullname2 = arr[0] + "-" + arr[1];
          }, 2000);
        },
      },
    });
  </script>
</html>
